<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		用户名:<input type="text" class="username" name="username" /><div class="exchange">用户名正确</div>
		密码: <input type="text"class="pwd" name="pwd" />
		<input type="submit" class="btn" value="提交" />
		<script type="text/javascript">
			var usernameEle = document.querySelector(".username");
			var exchangeEle = document.querySelector(".exchange");
			usernameEle.onblur = function(){
				var username = this.value;
				// console.log(username);
				// 通过ajax 把用户名提交到后端php
				var xhr = new XMLHttpRequest();
				xhr.open("get","./checkUser.php?username="+username,true);
				xhr.onload = function(){  //是异步的；
					// console.log(xhr.responseText);
					// var str = "111{"info":"\u7528\u6237\u540d\u4e0d\u5b58\u5728","status":0}"
					// JSON.parse(str);
					let res = JSON.parse(xhr.responseText);
					// console.log(res);
					// exchangeEle.innerHTML = res.info;
					if(res.status==1){
						exchangeEle.innerHTML = "用户名正确";
					}else{
						exchangeEle.innerHTML = "用户名不存在";
					}
				}
				xhr.send();
				
				
			}
			
			
		</script>
	</body>
</html>
